 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title>网上商城</title>
 		<link rel="stylesheet" href="css/style.css">
 		<script src="js/jquery-1.12.4.js"></script>
 		<script src="js/art-template-4.12.1/template-web.js"></script>
 		<script src="js/config.js"></script>
 		<style>
 			.hover-list li {
 				display: inline-block;
 				position: relative;
 				color: #000;
 				/* 默认文本颜色 */
 			}

 			.hover-list li:hover {
 				color: #f00;
 				/* 鼠标悬停时的文本颜色 */
 			}

 			/* 顶部导航栏样式 */
 			.top {
 				background-color: #333;
 				color: #fff;
 				padding: 10px;
 				font-size: 14px;
 			}

 			.top .wrap {
 				width: 100%;
 				overflow: hidden;
 			}

 			.top ul {
 				list-style-type: none;
 				margin: 0;
 				padding: 0;
 			}

 			.top ul li {
 				float: left;
 				margin-right: 10px;
 			}

 			.top ul li:last-child {
 				margin-right: 0;
 			}

 			.top ul li a {
 				color: #fff;
 				text-decoration: none;
 			}

 			.top ul li a:hover {
 				color: #ff0;
 				/* 鼠标悬停时的文本颜色 */
 			}

 			.top-right {
 				float: right;
 			}

 			.top-line {
 				margin-left: 10px;
 			}

 			.pjax {
 				color: #f00;
 				/* 特定链接的文本颜色 */
 				border-radius: 6px;
 			}

 			.header-info a:hover {
 				color: #f00;
 				/* 鼠标悬停时的文本颜色 */
 			}

 			.header-info a {
 				border-radius: 6px;
 			}

 			.header-search-btn:hover {
 				background-color: orangered;
 				/* 鼠标悬停时的背景颜色 */
 				color: #000;
 				/* 鼠标悬停时的文本颜色 */
 			}


 			.wrap li:hover {
 				color: red;
 				/* 或者任何你想要的颜色 */
 			}

 			.footer:hover {
 				color: red;
 			}

 			.header-search-hot ul {
 				display: flex;
 				list-style: none;
 				padding: 0;
 				list-style-type: none;
 				padding: 0;
 				margin: 0;
 			}

 			.header-search-hot ul li {
 				margin-right: 10px;

 			}

 			.header-search-hot ul li:hover {
 				color: red;
 			}
 		</style>
 	</head>
 	<body>
 		<!-- 顶部导航栏-->
 		<div class="top">
 			<div class="wrap">
 				<ul>
 					<li>小小商城</li>
 					<li>大大优惠</li>
 				</ul>
 				<ul class="top-right">
 					<li>您好，欢迎来到网上商城！[<a href="content/denglu.html">登录</a>][<a href="content/zhuce.html">免费注册</a>]</li>
 					<li class="top-line">|</li>
 					<li><a href="#">我的订单</a></li>
 					<li class="top-line">|</li>
 					<li><a href="content/huiyan.html">会员中心</a></li>
 					<li class="top-line">|</li>
 					<li><a class="pjax" href="content/cart.html">我的购物车</a></li>
 					<li class="top-line">|</li>
 					<li><a href="https://help.jd.com/user/custom.html">联系客服</a></li>

 				</ul>
 			</div>
 		</div>
 		<!-- 头部（从左到右依次是 LOGO、搜索框、快捷按钮） -->
 		<div class="header">
 			<div class="wrap">
 				<a class="pjax header-logo" href="content/index.html"><img src="img/logo.png" alt="" /></a>
 				<div class="header-search">
 					<input type="text" class="header-search-text">
 					<input class="header-search-btn" type="button" value="搜索">
 					<div class="header-search-hot">
 						<ul>
 							<li>热门搜索:</li>
 							<li>PHP培训</li>
 							<li>专业教材</li>
 							<li>智能手机</li>
 							<li>平板电脑</li>
 						</ul>
 					</div>
 				</div>
 				<div class="header-info">
 					<a href="content/huiyan.html">会员中心</a>
 					<a class="pjax" href="content/cart.html">去购物车结算</a>
 				</div>
 			</div>
 		</div>

 		<!-- 主导航栏 -->
 		<div class="nav">
 			<div class="wrap">
 				<div id="category_show" class="nav-category">
 					<div class="nav-category-tl">
 						<a class="pjax" href="content/find.html">全部商品分类</a>
 					</div>
 					<div id="category_list" class="category"></div>
 					<script id="category_list_tpl" type="text/html">
 					{{each item v1}}
 					{{if v1.parent_id === 0}}
 					<div class="category-item">
 						<div class="category-main">
 							<a class="pjax" href="find-{{v1.id}}.html">{{v1.name}}</a>
 						</div>
 						<div class="category-sub" style="display:none;">
 							{{each item v2}}
 							{{if v2.parent_id === v1.id}}
 							<dl>
 								<dt><a class="pjax" href="find-{{v2.id}}.html">{{v2.name}}</a></dt>
 								<dd>
 									{{each item v3}}
 									{{if v3.parent_id === v2.id}}
 									<a class="pjax" href="find-{{v3.id}}.html">{{v3.name}}</a>
 									{{/if}}
 									{{/each}}
 								</dd>
 							</dl>
 							{{/if}}
 							{{/each}}
 						</div>
 					</div>
 					{{/if}}
 					{{/each}}
 					</script>
 				</div>
 				<ul class="hover-list">
 					<li>服装城</li>
 					<li>特色购物</li>
 					<li>优惠促销</li>
 					<li>限时秒杀</li>
 					<li>品牌专区</li>
 					<li>服务中心</li>
 				</ul>
 			</div>
 			<div class="nav-line"></div>
 		</div>

 		<!-- 内容区域 -->
 		<div class="content">
 			<div class="wrap">
 				<div id="content"></div>
 			</div>
 		</div>
 		<!-- 服务链接 -->
 		<div class="service">
 			<div class="wrap">
 				<ul>
 					<li>购物指南</li>
 					<li>配送方式</li>
 					<li>支付方式</li>
 					<li>售后服务</li>
 					<li>特色服务 </li>
 					<li>网络服务 </li>
 				</ul>
 			</div>
 		</div>

 		<!-- 页脚 -->
 		<div class="footer">在线商城</div>
 		<!-- 引入 JavaScript 公共代码文件 -->
 		<script src="js/common.js"></script>
 	</body>
 </html>